<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-12-列表渲染</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
    {{ name }}
</div>

<script text="text/javascript">
    /**
     * 简单模拟数据劫持与 Vue 数据劫持的不足
     * 1.vm 身上缺少直接的数据, 缺少数据代理
     * 2.数据劫持没有考虑对象多层级的情况
     */

    let data = {
        name: '尚硅谷',
    }

    // 创建监视的实例对象, 用于监视 data 中的属性变化
    const obs = new Observer(data)
    console.log(obs)

    // 创意 vm 实例对象
    let vm = {}
    vm._data = data = obs

    function Observer(data) {
        // 汇总对象中所有的属性形成一个数组
        const keys = Object.keys(data)

        // 遍历
        keys.forEach((key) => {
            Object.defineProperty(this, key, {
                get() {
                    return data[key]
                },

                set(newValue) {
                    console.log(`${key} 被更改了, 我要去解析模板, 生成虚拟 DOM`)

                    let element = document.getElementById('root')
                    element.innerText = newValue

                    data[key] = newValue
                },
            })
        })
    }

    let element = document.getElementById('root')
    element.innerText = data.name

</script>
</body>
</html>